<template>
	<view class="com-container" :class="this.sprayInfo.showBG ? 'show-bg' : ''">
		<view class="com-container-item">
			<view class="com-container-item-img">
				<image src="../../static/uni.png" mode=""></image>
			</view>
			<view class="com-container-item-sys">
				<text>{{sprayInfo.sys}}</text>
			</view>
			<view class="com-container-item-count">
				<text>{{sprayInfo.count}}台机器</text>
			</view>
		</view>
		<view class="com-container-item-btn">
			<view class="item-btn">
				<text @click="switchStatus" class="iconfont icon-kaiji" :class="this.sprayInfo.isRuning ? 'run-color' : ''"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			}
		},
		props:{
			sprayInfo:{
				type:Object,
				default: () =>{
				}
			}
		},
		methods:{
			switchStatus(){
				this.$emit('switchStatusHandler',this.sprayInfo.ref);
			}
		}
	}
</script>

<style lang="scss">
	.com-container{
		width: 90%;
		display: grid;
		grid-template-columns: 60% 40%;
		grid-template-rows: 100% 100%;
		grid-gap: 10rpx;
		justify-content: center;
		background-color: rgba(255, 255, 0, 0);
		border: 1px red solid;
		border-radius: 20rpx;
		.com-container-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 10rpx;
			// border: 1px blue solid;
			.com-container-item-img{
				image{
					width: 40rpx;
					height: 80rpx;
				}
			}
			.com-container-item-sys{
				font-size: 30rpx;
				color: red;
			}
			.com-container-item-count{
				font-size: 18rpx;
				color: gray;
			}
		}
		.com-container-item-btn{
				position: relative;
				// border: 1px green solid;
				.item-btn{
					width: 80rpx;
					height: 80rpx;
					// border: 1px green solid;
					text-align: center;
					line-height: 80rpx;
					float: right;
					margin-top: 10rpx;
					margin-right: 10rpx;
					.icon-kaiji{
						font-size: 60rpx;
						color: gray;
					}
					.run-color{
						color: #f00;
					}
				}
		}
		
	}
	
	.show-bg{
		// background-color: #aaff00;
		background-color: rgba(255, 255, 0, 0.8);
	}
	
</style>